<script setup>
import {Check, Delete, Edit, RefreshRight} from "@element-plus/icons-vue";
import {onMounted, reactive, ref} from "vue";
import {doDelete, doGet, doPost} from "@/util/HttpRequest.js";
import {ElMessage} from "element-plus";
let loading= ref(false)
let tableData = ref([])
let dialogVisible = ref(false)
let dialogEditVisible = ref(false)

const addFormRef = ref()
const editFormRef = ref()

let ids=[]
let addOrEdit=true

const userForm =reactive({})
let userEditForm=reactive({})

const userFormRules=reactive({
  loginName:[
    {required:true,message:'请输入登录名称',trigger:"blur"},
    {min:5,max:20,message:'登录名称在5-20个字符',trigger:'blur'}
  ],
  phone:[
    {required:true,message:'请输入联系手机号',trigger:"blur"},
    {min:11,max:11,message:"手机号为11位",trigger:"blur"}
  ],
  shopName:[
    {required:true,message:'请输入商户名称',trigger:"blur"}
  ],
  shopScope:[
    {required:true,message:'请输入经营范围',trigger:"blur"}
  ],
  userEmail:[
    {required:true,message:'请求输入联系邮箱',trigger:"blur"}
  ]
})


onMounted(()=>{
  loadTableDate();
})
const loadTableDate = async () => {
  loading.value=true;
  await doGet('/user/getUserTable').then(resp=>{
    if(resp.data.code===200){
      tableData.value=resp.data.info;
    }
  }).finally(()=>{
    loading.value=false;
  })
}
const handleClick = () => {
  console.log('click')
}
const handleSwitchChange = (row) =>{
  let statusForm = reactive({
    id:row.id,
    status:row.status
  })
  doPost('/user/changStatus',statusForm).then(resp=>{
    if(resp.data.code===200){
      loadTableDate();
      ElMessage.success(resp.data.msg);
    }else{
      ElMessage.error('状态修改失败');
    }
  })
}
const singleDelete = (id)=>{
  doGet('/user/singleDeleteUser', {id:id}).then(resp=>{
    if(resp.data.code===200){
      loadTableDate();
      ElMessage.success(resp.data.msg);
    }else{
      ElMessage.error('用户删除失败');
    }
  })
}
const handleSelectionChange = (rows)=>{
  ids=[]
  for(let i=0;i<rows.length;i++){
    ids[i]=rows[i].id;
  }
  ids = ids.join(",")
  console.log(ids)
}
const batchDelete = ()=>{
  if(ids.length>0){
    doDelete('/user/batchDeleteUser',{ids:ids}).then(resp=>{
      if(resp.data.code===200){
        loadTableDate();
        ElMessage.success(resp.data.msg);
      }else{
        ElMessage.error('用户删除失败')
      }
    })
  }else{
    ElMessage.error('请选择要删除的用户')
  }
}
const addUser = () => {
  addOrEdit=true
  dialogVisible.value=true
}
const editUser = (row)=>{
  addOrEdit=false
  userEditForm=row;
  dialogEditVisible.value=true
}
const submitForm = async (addOrEditFormRef) =>{
  if(!addOrEditFormRef){
    return
  }
  await addOrEditFormRef.validate((valid)=>{
    if(valid){
      if(addOrEdit){
        doPost('/user/addUser',userForm).then(resp=>{
          if(resp.data.code===200){
            ElMessage.success('用户添加成功')
            dialogVisible.value=false
            resetForm()
            loadTableDate()
          }else{
            ElMessage.error('用户添加失败')
          }
        })
      }else{
        doPost('/user/editUser',userEditForm).then(resp=>{
          if(resp.data.code===200){
            ElMessage.success('用户编辑成功')
            loadTableDate()
            dialogEditVisible.value=false
          }else{
            ElMessage.error('用户编辑失败')
          }
        })
      }
    }else{
      ElMessage.error('表单校检不通过')
    }
  })
}
const resetForm = () =>{
  Object.keys(userForm).forEach((key)=>{
    userForm[key]=''
  })
}
</script>
<template>
  <el-table :data="tableData" style="width: 100%;height: 100%" @selection-change="handleSelectionChange"
    v-loading="loading"
  >
    <el-table-column fixed type="selection" width="40" align="center"/>
    <el-table-column type="expand">
      <template #default="scope">
        <div>
          <p>手机号: {{scope.row.phone }}</p><br>
          <p>邮箱: {{ scope.row.userEmail }}</p><br>
          <p>经营范围: {{ scope.row.shopScope }}</p>
        </div>
      </template>
    </el-table-column>
    <el-table-column prop="loginName" label="登录名称" width="120" align="center"/>
    <el-table-column prop="userNo" label="商户号" width="200" align="center"/>
    <el-table-column prop="accountNo" label="资金账号" width="220" align="center"/>
    <el-table-column prop="shopName" label="商户名称" width="120" align="center"/>
    <el-table-column prop="createTime" label="创建时间" width="320" align="center"/>
    <el-table-column prop="status" label="状态" width="65" align="center">
      <template #default="scope">
        <el-switch
            v-model="scope.row.status"
            active-value="ENABLE"
            inactive-value="DISABLE"
            @change="handleSwitchChange(scope.row)"
            class="ml"
            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #6b6b6b"
        />
      </template>
    </el-table-column>
    <el-table-column fixed="right" width="135" align="center">
      <template #header="scope">
        <el-button size="small" @click="addUser()">
          添加
        </el-button>
        <el-button size="small" @click="batchDelete()">删除</el-button>
      </template>
      <template #default="scope">
        <el-button  @click="editUser(scope.row)" size="small" circle><el-icon><Edit /></el-icon></el-button>
        <el-button class="b2" @click="singleDelete(scope.row.id)" size="small" circle>
          <el-icon><Delete /></el-icon>
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-dialog title="添加" v-model="dialogVisible" align-center style="text-align: center" :destroy-on-close="true"
    @closed="resetForm">
    <el-form ref="addFormRef" :model="userForm" label-width="auto" :rules="userFormRules">
      <el-form-item label="登录名称" prop="loginName">
        <el-input v-model="userForm.loginName" size="large"/>
      </el-form-item>
      <el-form-item label="联系方式" prop="phone">
        <el-input v-model="userForm.phone" size="large"/>
      </el-form-item>
      <el-form-item label="商户名称" prop="shopName">
        <el-input v-model="userForm.shopName" size="large"/>
      </el-form-item>
      <el-form-item label="经营范围" prop="shopScope">
        <el-input v-model="userForm.shopScope" size="large"/>
      </el-form-item>
      <el-form-item label="联系邮箱" prop="userEmail">
        <el-input v-model="userForm.userEmail" size="large"/>
      </el-form-item>
      <el-form-item style="margin-left: 43%">
          <el-button color="#000000" @click="submitForm(addFormRef)"><el-icon><Check /></el-icon></el-button>
          <el-button @click="resetForm"><el-icon><RefreshRight /></el-icon></el-button>
      </el-form-item>
    </el-form>
  </el-dialog>

  <el-dialog title="编辑" v-model="dialogEditVisible" align-center style="text-align: center" :destroy-on-close="true">
    <el-form ref="editFormRef" :model="userEditForm" label-width="auto" :rules="userFormRules">
      <el-form-item label="登录名称" prop="loginName">
        <el-input v-model="userEditForm.loginName" size="large"/>
      </el-form-item>
      <el-form-item label="联系方式" prop="phone">
        <el-input v-model="userEditForm.phone" size="large"/>
      </el-form-item>
      <el-form-item label="商户名称" prop="shopName">
        <el-input v-model="userEditForm.shopName" size="large"/>
      </el-form-item>
      <el-form-item label="经营范围" prop="shopScope">
        <el-input v-model="userEditForm.shopScope" size="large"/>
      </el-form-item>
      <el-form-item label="联系邮箱" prop="userEmail">
        <el-input v-model="userEditForm.userEmail" size="large"/>
      </el-form-item>
      <el-form-item style="margin-left: 43%">
        <el-button color="#000000" @click="submitForm(editFormRef)"><el-icon><Check /></el-icon></el-button>
        <el-button @click="resetForm"><el-icon><RefreshRight /></el-icon></el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>


<style scoped>
.b2{
    margin-left: 35px;
}
</style>